<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize } from 'element-plus'
import { returnBookApi, queryApiBook } from '@/api/returnbook'

// 图书分类数据
const books = ref([{ name: '科幻书籍', value: 1 }, { name: '动漫小说', value: 2 }, { name: '单词大典', value: 3 }])
//搜索栏数据对象
const searchBook = ref({ username: '', name: '', borrowTime: '' })

// 归还图书表格对象
const retrunBooks = ref([])

//自动加载界面
onMounted(() => {
    onSubmit()
})

// 提交按钮
const onSubmit = async () => {
    const reuslt = await queryApiBook(searchBook.value.username, searchBook.value.name, searchBook.value.borrowTime, currentPage.value, pageSize.value)
    if (reuslt && typeof reuslt === 'object') {
        const data = reuslt.data || reuslt
        retrunBooks.value = data.records || []
        total.value = data.total || 0
    } else {
        ElMessage.error("查询失败")
    }
}

// 清除
const clear = () => {
    searchBook.value = { username: '', name: '', borrowTime: '' }
    onSubmit()
}

//归还图书数据存储对象
const returnData = ref({
    username: '',
    status: ''
})
// 归还图书
const retrunBook = (row) => {
    returnData.value = row
    ElMessageBox.confirm(
        '确定要归还此书吗？',
        '请确认信息！',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }                                   
    )
        .then(async () => {
            returnData.value.status = '0'
            // 更新状态为已归还
            const reuslt = await returnBookApi(returnData.value)
            if (reuslt) {
                ElMessage({
                    type: 'success',
                    message: '归还成功！',
                })
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '归还取消！',
            })
        })

}


//分页条
// 初始页码
const currentPage = ref(1)
// 每页记录数
const pageSize = ref(10)
const size = ref<ComponentSize>('default')
const background = ref(true)
const disabled = ref(false)
const total = ref(0) // 页码总记录数

const handleSizeChange = (val: number) => {
    console.log(`第${val} 页`)
}
const handleCurrentChange = (val: number) => {
    console.log(`当前页码是: ${val}`)
}


</script>


<template>
    <span class="Info">注：所有的数据每月自动删除</span>
    <h1>归还图书</h1>

    <!-- 搜索栏 -->
    <div class="container">
        {{ searchBook }}
        <el-form :inline="true" :model="searchBook" class="demo-form-inline">
            <!-- 根据用户名查询 -->
            <el-form-item label="用户名:">
                <el-input v-model="searchBook.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="姓名:">
                <el-input v-model="searchBook.name" placeholder="请输入姓名" clearable />
            </el-form-item>

            <!-- 根据时间查询 -->
            <el-form-item label="借阅时间:">
                <el-date-picker v-model="searchBook.borrowTime" type="date" placeholder="请输入借阅时间"
                    value-format="YYYY-MM-DD" />
            </el-form-item>

            <!-- 查询和删除 -->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="danger" @click="clear">清除</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 表格 -->
    <div class="container">
        <el-table :data="retrunBooks" border style="width: 100%">
            <el-table-column prop="username" label="用户名" width="100" />
            <el-table-column prop="name" label="姓名" width="100" />
            <el-table-column label="头像" width="120" align="center">
                <template #default="scope">
                    <img :src="scope.row.image" height="40px">
                </template>
            </el-table-column>
            <el-table-column label="性别" width="120" align="center">
                <template #default="scope">
                    {{ scope.row.gender == 1 ? '男' : '女' }}
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号" width="180" />
            <el-table-column prop="bookNum" label="图书数量" width="100" />
            <el-table-column prop="title" label="归还图书" width="180" />
            <el-table-column prop="borrowTime" label="借书时间" width="180" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" size="80px" @click="retrunBook(scope.row)" v-if="scope.row.status == 1">
                        归还
                    </el-button>
                    <el-button type="success" size="samll" v-if="scope.row.status == 0">已归还</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>


    <!-- 分页条 -->
    <div class="container">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>


</template>

<style>
.container {
    margin: 15px 0;
}
.Info{
    color: #c2c2c2;
}
</style>